<template>
  <div>
    <div class="chart" id="eqstate" style="width:90%; height:33vh"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      },
    },
    state: {
      type: String,
      default: '',
    },
  },
  mounted() {
    this.initChart()
  },
  components: {},

  watch: {},
  methods: {
    initChart() {
      const option = {
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            center: ['50%', '60%'],
            radius: '70%',
            min: 0,
            max: 1,
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                width: 8,
                color: [
                  [0.25, '#e51721'],
                  [0.5, '#177ee5'],
                  [0.75, '#e5c717'],
                  [1, '#33e32a'],
                ],
              },
            },
            pointer: {
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: '12%',
              width: 16,
              offsetCenter: [0, '-60%'],
              itemStyle: {
                color: 'auto',
              },
            },
            axisTick: {
              show: false,
              length: 4,
              distance: 5,
              lineStyle: {
                color: 'inherit',
                width: 1,
              },
            },
            splitLine: {
              show: false,
              length: 8,
              distance: 5,
              lineStyle: {
                color: '#666',
                width: 2,
              },
            },
            axisLabel: {
              color: '#ddd',
              fontSize: this.fitChartSize(15),
              distance: this.fitChartSize(-58),
              rotate: 'tangential',
              formatter: function(value) {
                if (value === 0.875) {
                  return '运行'
                } else if (value === 0.625) {
                  return '待机'
                } else if (value === 0.375) {
                  return '停机'
                } else if (value === 0.125) {
                  return '维修'
                }
                return ''
              },
            },
            title: {
              offsetCenter: [0, '-10%'],
              color: '#ccc',
              fontSize: this.fitChartSize(14),
            },
            detail: {
              show: false,
              fontSize: 30,
              offsetCenter: [0, '-35%'],
              valueAnimation: true,
              formatter: function(value) {
                return Math.round(value * 100) + ''
              },
              color: 'inherit',
            },
            data: [
              {
                value: this.state,
                name: '运行状态',
              },
            ],
          },
        ],
      }
      const chart = document.getElementById('eqstate')
      const myChart = this.$echarts.init(chart)
      myChart.setOption(option)
    },
  },
}
</script>
<style lang="less">
.eq-title {
  position: absolute;
  right: 6%;
  top: 10px;
  color: #ddd;
  p {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  .name {
    font-size: 9px;
    width: 60px;
    text-align: right;
  }
  .value {
    flex: 1;
    font-size: 11px;
    color: #1ed3e5;
    padding-left: 5px;
    text-align: left;
  }
}
</style>
